<template>
  <view>
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" @query="queryList">
      <template #top>
        <mt-navbar title="提现记录"> </mt-navbar>
      </template>
      <view class="px-32rpx pt-16rpx">
        <view v-for="item in dataList" :key="item.id" class="list-li bg-#ffffff mb-24rpx px-32rpx py-32rpx rd-8rpx" @click="goDetail(item)">
          <view class="flex items-center justify-between mb-30rpx">
            <text class="text-32rpx text-#1C213E font-bold">{{ item.createTime }}</text>
            <view v-if="item.approveStatus === 1" class="text-28rpx text-#007BFF bg-[rgba(0,123,255,0.05)] rd-4rpx px-16rpx py-6rpx">审核中</view>
            <view
              v-if="item.approveStatus === 2 && item.withdrawStatus === 2"
              class="text-28rpx text-#28B094 bg-[rgba(40,176,148,0.05)] rd-4rpx px-16rpx py-6rpx"
              >提现成功</view
            >
            <view
              v-if="item.approveStatus === 2 && item.withdrawStatus === 3"
              class="text-28rpx text-#F94B4A bg-[rgba(249,75,74,0.05)] rd-4rpx px-16rpx py-6rpx"
              >提现失败</view
            >
            <view v-if="item.approveStatus === 3" class="text-28rpx text-#F94B4A bg-[rgba(249,75,74,0.05)] rd-4rpx px-16rpx py-6rpx">审批驳回</view>
          </view>
          <view class="flex items-start mb-16rpx line-height-28rpx">
            <view class="w-170rpx text-28rpx text-#727687">提现金额：</view>
            <view class="flex-1 min-w-0 text-28rpx text-#EFB339 font-bold break-all">￥{{ amountTransfer(item.withdrawAmount, 2) }}</view>
          </view>
          <view class="flex items-start mb-16rpx">
            <view class="w-170rpx text-28rpx text-#727687">账户类型：</view>
            <view class="flex-1 min-w-0 text-28rpx text-#1C213E font-bold break-all">
              <text v-if="item.withdrawWay === 1">微信</text>
              <text v-if="item.withdrawWay === 2">支付宝</text>
              <text v-if="item.withdrawWay === 3">银行卡</text>
            </view>
          </view>
          <view class="flex items-start line-height-28rpx">
            <view class="w-170rpx text-28rpx text-#727687">账户：</view>
            <view class="flex-1 min-w-0 text-28rpx text-#1C213E font-bold break-all">
              {{ item.withdrawAccountName }}({{ item.withdrawAccount.slice(0, 4) }})
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { withdrawalRecordgetWithdrawalRecordPageApp } from '@/subCommission/api/index';
import { amountTransfer } from '@/utils/tools';

function goDetail(item) {
  uni.navigateTo({
    url: `/subCommission/pages/withdrawalDetail?id=${item.id}`
  });
}

// 分页 ref
const pagingRef = ref(null);
const dataList = ref([]);
const lastId = ref('');

// 请求列表数据
async function queryList(pageNum, pageSize) {
  try {
    const params = {
      pageNum: pageNum,
      pageSize: pageSize,
      lastId: pageNum === 1 ? '' : lastId.value
    };
    const res = await withdrawalRecordgetWithdrawalRecordPageApp(params);
    const list = res.data.items;

    lastId.value = list[list.length - 1]?.id;

    pagingRef.value.complete(list);
  } catch (e) {
    pagingRef.value.complete(false);
  }
}

onLoad(() => {
  nextTick(() => {
    pagingRef.value.reload();
  });
});
</script>

<style lang="scss" scoped></style>
